<html>
<head>
    <title></title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="../../../style.css">

    <style>
        body {
            background: #F0F2F6;
        }

        .main-head {
            background: #fff;
            padding-left: 10px;
            padding-top: 10px;
            margin-bottom: 0px;
            border: solid 1px #fff;
        }
        #editForm{
            padding: 30px;
        }
       .page-main{
         background: #ffffff;
           height: 80%;
       }
        .el-select-dropdown{
            z-index: 9999999 !important;
        }
    </style>
</head>
<body>
<div class="page" id="page-monitor" style="display: none">
    <div class="page-main">
        <el-row>
            <el-col :span="15">
                <el-form ref="form" :model="form" id="editForm" >
                    <el-form-item label="发送对象">
                        <el-select v-model="form.UserIds" multiple  placeholder="请选择发送对象" style="width:calc(100% - 165px);margin-left: 15px">
                            <el-option v-for="item in childUsers" :value="item.Id" :label="item.userName"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="通知标题">
                        <el-input v-model="form.bbsTitle" placeholder="请输入内容" style="width:calc(100% - 165px);margin-left: 15px"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-row>
                            <el-col :span="2">
                                发送内容
                            </el-col>
                            <el-col :span="20" >
                                <div id="editor">

                                </div>
                            </el-col>
                        </el-row>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit" style="float:right;margin-right: 8% ">发送通知</el-button>
                    </el-form-item>
                </el-form>
            </el-col>

            <el-col :span="9">
                <h3 align="center">发件箱</h3>
                <el-table
                        :data="tableData.filter(data => !search || data.title.toLowerCase().includes(search.toLowerCase()))"
                        style="width: 90%;margin: 0 5%; height: 70%;overflow-y: scroll" >
                    <el-table-column
                            label="标题"
                            prop="bbsTitle">
                        <template slot-scope="scope">
                            <span style="color:#0081ff;font-size: 16px">{{ scope.row.bbsTitle }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                            width="150"
                            align="center">
                        <template slot="header" slot-scope="scope">
                            <el-input
                                    v-model="search"
                                    size="mini"
                                    placeholder="输入关键字搜索"/>
                        </template>
                        <template slot-scope="scope">
                            <el-button
                                    type="primary"
                                    size="mini"
                                    @click="showDetail(scope.row)">明细</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination
                        small
                        layout="prev, pager, next"
                        :pagesize="param.pagesize" :total="param.totalCount" :current-page.sync="param.pageno" @current-change="onChangePage">
                </el-pagination>
            </el-col>
        </el-row>

    </div>

</div>
<script type="text/javascript" src="release/wangEditor.js"></script>
<script type='text/javascript' src='../../../assets/bundle.js' charset='utf-8'></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script type='text/javascript' src='../../../assets/jquery-1.11.2.min.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../assets/echarts.min.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../js/common.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../js/component.js' charset='utf-8'></script>

<script>

    var vuePage = new Vue({
        el: '#page-monitor',
        data: {
            form:{
                UserIds:[],
                bbsTitle:'',
            },
            param:{
                pagesize:10,
                pageno:1,
                totalCount:10,
                UserId:SiteConfig.account.id
            },
            childUsers:[],
            tableData: [],
            search: ''
        },
        methods: {
            onSubmit:function () {
                console.log(this.form.UserIds);
                console.log(this.form.bbsTitle);
                console.log(this.editor.txt.html());
                let param = {
                    projectNo: SiteConfig.account.projectNo,
                    UserId:SiteConfig.account.id,
                    bbsTitle: this.form.bbsTitle,
                    UserIds: this.form.UserIds.join(','),
                    bbsContent: this.editor.txt.html(),
                }
                if (param.bbsTitle && param.UserIds && param.bbsContent){
                    HttpUtil.post('CompanyBbs/BbsAdd',param).success((r)=>{
                        if (r.state == 0){
                            this.$message.success('发送成功')
                            this.getBbs();
                            this.editor.txt.html('');
                            this.form = {
                                UserIds:[],
                                bbsTitle:'',
                            }
                        }else {
                            this.$message({
                                type: 'error',
                                message: r.errMsg
                            })
                        }

                    })
                }

            },
            onChangePage:function (page) {
               this.param.pageno = page;
               this.getBbs();
            },
            showDetail(row){
                window.open('notice-detail.html?bbsId='+row.BbsId);
            },
            getBbs(){
                HttpUtil.get('CompanyBbs/BbsList',this.param).success((r)=>{
                    this.tableData = r.data;
                    this.param.totalCount  = r.total;
                })
            }
        },
        created: function () {
            $('.page').show();

        },
        mounted: function () {
            let E = window.wangEditor
            let editor = new E('#editor')
            editor.customConfig.menus = [
                'head',
                'bold',
                'italic',
                'underline'
            ];
            editor.create()
            this.editor = editor;
            HttpUtil.get('User/Child').success((data)=>{
                this.childUsers = data.data;
            });
            this.getBbs();
        }
    });


</script>

</body>
</html>
